<template>
	<view class="category">
		<scroll-view noScorll class="left" scroll-y="true">
			<!-- //scroll-y 垂直滚动  如果是scroll-x 就是横向滚动 -->
			<view class="title">
				<!-- :class="{active:index === activeIndex}"  index === activeIndex  等于他的情况才会触发 -->
				<!-- @click.stop 只有在当前组件有效  阻止冒泡事件-->
				<view @click.stop="getLabel(index,item)" :class="{active:index === activeIndex}" v-for="(item,index)  in categoryList"
				 :key="index">{{item.name}}</view>
			</view>
		</scroll-view>

		<scroll-view class="right" scroll-y="true">
			<view class="tag">
				<!-- click 的stop  会作用到子组件来使用 以防来影响父组件的点击  阻止冒泡 -->
				<view  @click.stop="clickLabel(item)"  v-for="(item,index) in  labelList" :key="index">{{item.name}}</view>
				<!-- @click="clickLabel(item)"  //点击标签跳转 -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/course.js'
	export default {
		props:{
			//搜索页将当前组件作为子组件 传递了对应分类标题处的对象
			value:{
				type:Object,
				default: ()=>{}
			}
		},
		data() {
			return {
				categoryList: [], //左侧分类数据
				labelList: [], // 右侧标签数据
				activeIndex: 0, //当前选中的下标  第几个元素
			}
		},
		mounted() {
			//查询分类数据
			this.getList()
			
		},
		onLoad() {  //uniapp 提供的 页面钩子  页面生命周期

		},
		//监听原生的第几个按钮 
		onNavigationBarButtonTap(e) {
			console.log('category',e)
			if(e.index === 0) {  //搜索第几个按钮 然后跳转到指定的页面
				this.navTo('/pages/search/search')
			}
		},
		
		methods: {
			async getList() {
				//查询分类及标签信息
				const {
					data
				} = await api.getCategoryList()
				this.categoryList = data
				
				
				// 如果有value值  则是搜索页出传递的数据
				if(this.value){  //追加元素
				
					//针对每个分类下的标签列表 向标签列表第1个元素中添加不限
					this.categoryList.forEach((item)=>{
							//id  标签id  
							//name 用于在标签列表中显示
							//cname 分类名称用于在标题中显示
							// categoryId分类id 用于作条件查询
						item.labelList.unshift(
						{id:null,name: '不限',cname:item.name,categoryId:item.id}
						)
					})
				
					// 向分类列表中的第1个元素添加 '全部分类'     （unshift 添加元素）
					this.categoryList.unshift({id:null,name:'全部分类'})
					//弹出分类窗口  回显上次点击所在的分类处（颜色是蓝色）
					this.activeIndex = this.value.activeIndex  > -1 ?  this.value.activeIndex+1 : this.activeIndex
					
				}
				
				
				// console.log('data',data)
				//获取当前选中的标签列表、  （第1个分类）
				this.getLabel(this.activeIndex)  //一开始就要传递0 下标
			},

			//获取标签列表（分类下标，分类信息）
			getLabel(index, item) {
				//选中样式
				this.activeIndex = index 
				
				//判断item 有没有值
				if(item && item.name === '全部分类'){
					// 有则是分类弹窗  ,直接关闭串口 讲数据传递给下拉筛选标题处
					this.searcPageChangeLabel(item)
					return
				}
				
				//获取点击的分类对象
				const activeCategory =  this.categoryList[index]
				//通过分类对象获取标签列表
				this.labelList =  activeCategory.labelList
				// console.log('labelList',activeCategory.labelList)
			},
			
			//点击右侧标签，跳转到搜索页面(item当前标签信息)
			clickLabel(item){
				//如果有value 则当前页面搜索页作为子钻剑
				if(this.value){
					//将点击的标签信息会先到搜索页  （下拉筛选进行搜索） 进行搜索
					this.searcPageChangeLabel(item)
					return
				}
				
				
				
				// 当前点击的下标activeIndex:this.activeIndex
				//labeId 一定要放在第一个位置 通过位置来获取数据   数据规范
				const params = {labelId:item.id,name:item.name,activeIndex:this.activeIndex}
        this.navTo(`/pages/search/search?params=${ JSON.stringify(params) }`)
				// uni.navigateTo({
				// 	url:`/pages/search/search?params=${ JSON.stringify(params)}`
				// })
				
				
			},
			//弹窗选择标签  、分类
			searcPageChangeLabel(item){
				console.log( this.value,'？？？？？')
				//避免重复点击
				// this.value.name  上一次的分类或者标签名称  item.name 是当前这次点击的名称
				//如果不相等的话就执行
				if(this.value.name  !== item.name && this.value.name !== item.cname){
					//如果有cname则是不限  否则是具体标签名
					this.value.name  = item.cname  || item.name
					//标签ID
					this.value.id = item.id  || null
					//分类id  (点击的是·不限· ， 就取分类id )
					this.value.categoryId = item.categoryId  || null 
					//down-bar.vue  组件
					this.$emit('searchBylabel',this.value)
				}
				//关闭弹窗
				this.value.active  = false
				
				
			},
			
			
		}

	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.category {
		display: flex;
		height: 100%;

		.left {
			background-color: #F8F9FB;
			width: 200rpx;
			border-radius: 0 25rpx 25rpx 0;

			.title {
				view {
					line-height: 40rpx;
					text-align: center;
					font-size: 25rpx;
					color: #888888;
					width: 200rpx;
					padding: 55rpx 30rpx;
					position: relative;

					&::before {
						//在分类前面加上一个  |  线
						position: absolute;
						content: '';
						// width: 0rpx;
						// height: 0rpx;
						border-right: 6rpx solid #345dc2;
						border-radius: 30rpx;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						transition: .3s;
					}
				}

				.active {
					color: #345dc2;
					font-size: 33rpx;
					font-weight: bold; //字体加粗

					&::before {
						height: 50rpx;
					}
				}
			}
		}

		.right {
			background-color: #FFFFFF;
			padding-left: 15rpx;
			margin: 0; // 铺满

			.tag {
				display: flex;
				flex-wrap: wrap; //超出范围自动换行
				padding-top: 35rpx;
				padding-left: 10rpx;

				view {
					font-size: 25rpx;
					line-height: 60rpx;
					border: 1px solid #999;
					border-radius: 30rpx;
					min-width: 160rpx; // 给他最小的宽度
					text-align: center;
					padding: 0;
					margin: 15rpx 5rpx;
				}
			}
		}
	}
</style>
